<template>
  <div class="settings-view module-container">
    <div class="module-header">
      <h2>{{ $t('settings.title') }}</h2>
      <p class="module-description">{{ $t('settings.description') }}</p>
    </div>

    <div class="module-content">
      <el-tabs v-model="activeTab">
        <el-tab-pane :label="$t('settings.general')" name="general">
          <el-form label-width="150px">
            <!-- 隐藏语言切换功能
            <el-form-item :label="$t('settings.language')">
              <el-select v-model="settings.language" @change="changeLanguage">
                <el-option label="简体中文" value="zh-CN" />
                <el-option label="English" value="en-US" />
              </el-select>
            </el-form-item>
            -->
            
            <el-form-item label="自动保存">
              <el-switch v-model="settings.autoSave" />
              <span class="form-tip">自动保存请求历史和配置</span>
            </el-form-item>
            
            <el-form-item label="启动时恢复">
              <el-switch v-model="settings.restoreOnStartup" />
              <span class="form-tip">启动时恢复上次的工作状态</span>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveGeneralSettings">{{ $t('common.save') }}</el-button>
              <el-button @click="resetGeneralSettings">{{ $t('common.reset') }}</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane :label="$t('settings.network')" name="network">
          <el-form label-width="150px">
            <el-form-item :label="$t('settings.timeout')">
              <el-input-number
                v-model="settings.requestTimeout"
                :min="1000"
                :max="300000"
                :step="1000"
              />
              <span class="form-tip">毫秒</span>
            </el-form-item>
            
            <el-form-item label="证书验证">
              <el-switch v-model="settings.verifyCertificate" />
              <span class="form-tip">HTTPS请求时验证SSL证书</span>
            </el-form-item>
            
            <el-form-item label="跟随重定向">
              <el-switch v-model="settings.followRedirect" />
              <span class="form-tip">自动跟随3xx重定向响应</span>
            </el-form-item>
            
            <el-form-item :label="$t('settings.maxRedirects')">
              <el-input-number
                v-model="settings.maxRedirects"
                :min="0"
                :max="20"
                :disabled="!settings.followRedirect"
              />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveNetworkSettings">{{ $t('common.save') }}</el-button>
              <el-button @click="resetNetworkSettings">{{ $t('common.reset') }}</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane :label="$t('app.about')" name="about">
          <div class="about-section">
            <div class="app-info">
              <i class="el-icon-link app-logo-icon"></i>
              <h2>LinkVerify</h2>
              <p>Multi-Service Communication Debug Test Tool</p>
              <p>版本: 1.0.0</p>
            </div>

            <el-descriptions :column="1" border>
              <el-descriptions-item label="Electron">
                {{ electronVersion }}
              </el-descriptions-item>
              <el-descriptions-item label="Node.js">
                {{ nodeVersion }}
              </el-descriptions-item>
              <el-descriptions-item label="Chrome">
                {{ chromeVersion }}
              </el-descriptions-item>
              <el-descriptions-item label="V8">
                {{ v8Version }}
              </el-descriptions-item>
              <el-descriptions-item label="开发者">
                GuLu
              </el-descriptions-item>
              <el-descriptions-item label="许可证">
                MIT License
              </el-descriptions-item>
            </el-descriptions>

            <div class="links">
              <el-button type="text" @click="openGithub">
                <i class="el-icon-link"></i> GitHub
              </el-button>
              <el-button type="text" @click="openDocs">
                <i class="el-icon-document"></i> 文档
              </el-button>
              <el-button type="text" @click="checkUpdate">
                <i class="el-icon-refresh"></i> 检查更新
              </el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Settings',
  data() {
    return {
      activeTab: 'general',
      settings: {
        language: 'zh-CN',
        autoSave: true,
        restoreOnStartup: true,
        requestTimeout: 30000,
        verifyCertificate: true,
        followRedirect: true,
        maxRedirects: 5
      },
      electronVersion: '',
      nodeVersion: '',
      chromeVersion: '',
      v8Version: ''
    }
  },
  computed: {
    ...mapState(['globalSettings'])
  },
  created() {
    this.loadSettings()
    this.getVersionInfo()
  },
  methods: {
    ...mapActions(['updateGlobalSettings']),
    
    loadSettings() {
      const savedSettings = localStorage.getItem('app-settings')
      if (savedSettings) {
        try {
          const parsed = JSON.parse(savedSettings)
          this.settings = { ...this.settings, ...parsed }
        } catch (e) {
          console.error('Failed to load settings:', e)
        }
      }
      // 设置当前语言
      if (this.settings.language) {
        this.$i18n.locale = this.settings.language
      }
    },
    
    changeLanguage(value) {
      this.$i18n.locale = value
      localStorage.setItem('app-language', value)
      // 保存设置
      this.saveSettings()
      this.$message.success(this.$t('common.success'))
    },
    
    saveSettings() {
      localStorage.setItem('app-settings', JSON.stringify(this.settings))
    },
    
    saveGeneralSettings() {
      this.saveSettings()
      this.updateGlobalSettings({
        language: this.settings.language,
        autoSave: this.settings.autoSave,
        restoreOnStartup: this.settings.restoreOnStartup
      })
      this.$message.success(this.$t('common.success'))
    },
    
    resetGeneralSettings() {
      this.settings.language = 'zh-CN'
      this.settings.autoSave = true
      this.settings.restoreOnStartup = true
      this.$i18n.locale = 'zh-CN'
    },
    
    saveNetworkSettings() {
      this.saveSettings()
      this.updateGlobalSettings({
        requestTimeout: this.settings.requestTimeout,
        verifyCertificate: this.settings.verifyCertificate,
        followRedirect: this.settings.followRedirect,
        maxRedirects: this.settings.maxRedirects
      })
      this.$message.success(this.$t('common.success'))
    },
    
    resetNetworkSettings() {
      this.settings.requestTimeout = 30000
      this.settings.verifyCertificate = true
      this.settings.followRedirect = true
      this.settings.maxRedirects = 5
    },
    
    getVersionInfo() {
      if (process.versions) {
        this.electronVersion = process.versions.electron || 'N/A'
        this.nodeVersion = process.versions.node || 'N/A'
        this.chromeVersion = process.versions.chrome || 'N/A'
        this.v8Version = process.versions.v8 || 'N/A'
      }
    },
    
    openGithub() {
      if (window.electronAPI) {
        shell.openExternal('https://github.com/llgululu/link-verify')
      }
    },
    
    openDocs() {
      if (window.electronAPI) {
        shell.openExternal('https://github.com/llgululu/link-verify/docs')
      }
    },
    
    checkUpdate() {
      this.$message.info('当前已是最新版本')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../styles/variables.scss';

.settings-view {
  .module-content {
    padding: $spacing-large;
  }
  
  .form-tip {
    margin-left: $spacing-base;
    color: $text-secondary;
    font-size: $font-size-small;
  }
  
  
  .about-section {
    .app-info {
      text-align: center;
      padding: $spacing-large;
      
      .app-logo-icon {
        font-size: 80px;
        color: $primary-color;
        margin-bottom: $spacing-medium;
        display: inline-block;
      }
      
      h2 {
        margin: $spacing-base 0;
      }
      
      p {
        color: $text-secondary;
        margin: $spacing-small 0;
      }
    }
    
    .links {
      text-align: center;
      margin-top: $spacing-large;
      
      .el-button {
        margin: 0 $spacing-base;
      }
    }
  }
}
</style>